<template>
  <div>
    <mm-header></mm-header>
    <div class="container">
      <div class="container-title">
        <router-link to="/">首页</router-link>
        >
        <router-link to="/category">全部分类</router-link>
        >
        <a href="#">{{categoryName}}</a>
        >
        <button class="fr mui-btn-xs">筛选</button>
      </div>
      <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media"
          v-for="(item ,index) in productList" :key="index"
          >
              <router-link :to="'/categorySonInfo/productid='+item.productId">
                  <img class="mui-media-object mui-pull-left"
                  :src="imgUrl(index)"
                  >
                  <div class="mui-media-body">
                      <p class="productName">
                        {{item.productName}}
                      </p>
                      <p class="productPrice">
                        {{item.productPrice}}
                      </p>
                      <p class='mui-ellipsis productSmall'>
                        <span>{{item.productQuote}}</span>
                        |
                        <span>
                          {{item.productCom}}
                        </span>
                      </p>
                  </div>
              </router-link>
          </li>
        </ul>
        <div class="pagations">
          <button @click="prev">前一页</button>
          <select name="" id="select" ref="select" @change="setSelect">
            <option v-for="item in totalPage" :key="item" :value="item"> {{item}} / {{totalPage}}</option>
          </select>
          <button @click="next">下一页</button>
        </div>
  </div>

    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmHeader from "../publicComponents/mmHeader.vue";
import mmFooter from "../publicComponents/mmFooter.vue";
import { Toast } from 'mint-ui';
export default {
  data() {
    return {
      categoryName: '',
      productList: [],
      totalPage: 0,
      selectValue: 1,
      dataChace: {}
    }
  },
  created() {
    this.getProductList()
    this.getCategory()
  },
  methods: {
    next() {
      if(this.selectValue == this.totalPage) {
        Toast({
          message: '王慧敏温馨提示：   已经莫得了哦',
          position: 'middle',
          duration: 2000
        })
        return
      }
      this.selectValue ++
      // console.log( '1' + this.selectValue)
      this.setButton()
    },
    prev() {
      if(this.selectValue == 1) {
        Toast({
          message: '王慧敏温馨提示：   已经是第一页了哦',
          position: 'middle',
          duration: 2000
        })
        return
      }
      console.log('prev')
      this.selectValue --
      this.setButton()
    },
    setSelect() {
      this.selectValue = this.$refs.select.value
      this.getProductFromSorB()
    },
    setButton() {
      this.$refs.select.value = this.selectValue
      this.getProductFromSorB()
    },
    getProductFromSorB() {
      var id = this.$route.params.id
      if(this.dataChace[this.selectValue]) {
          this.productList = this.dataChace[this.selectValue]
          return
      }
      this.$http.get('api/getproductlist?'+id+'&pageid='+this.selectValue).then((res) => {
      this.productList = res.body.result
      this.dataChace[this.selectValue] = this.productList
      })
    },
    getCategory() {
      var id = this.$route.params.id
      this.$http.get('api/getcategorybyid?'+id).then((res) => {
        var tt = res.body.result[0]
        this.categoryName = tt.category
        this.$store.commit('addCategoryTitle',this.categoryName)
      })
    },
    getProductList() {
      var id = this.$route.params.id
      this.$http.get('api/getproductlist?'+id).then((res) => {
        this.productList = res.body.result
        this.dataChace[this.selectValue] = this.productList
        this.totalPage = Math.ceil(res.body.totalCount / res.body.pagesize)
      })
    },
    imgUrl(i) {
      var str = ''
      this.productList.forEach((item , index) => {
        if(i === index) {
          var num = item.productImg.indexOf('"')
          var num2 = item.productImg.indexOf('" alt')
          str = item.productImg.slice(num+1 ,num2)
        }
      })
      return str
    }
  },
  watch: {
    // selectValue : function(newVal,oldVal) {
    //   this.$refs.select.value = newVal
    //   this.setButton()
    //   console.log(2)
    // }
  },
  components: {
    mmHeader,
    mmFooter
  }
};
</script>
<style lang="less" scoped>
  @import '../../less/var';
  .container {
    position: relative;
    .container-title {
      padding-left: 25/@base;
      height: 76/@base;
      line-height: 76/@base;
      color: #000;
      font-size: 26/@base;
      background-color: #f5f5f5;
      a {
        color: #000;
        // text-decoration: underline;
      }
      .mui-btn, button, input[type=button], input[type=reset], input[type=submit] {
        padding: 8/@base 28/@base;
        font-size: 26/@base;
        margin-top: 8/@base;
        color: #000;
        background-color: #ccc;
      }
    }
    .pagations {
      display: flex;
      // height: 50/@base;
      padding: 10/@base 30/@base;
      background-color: #fff;
      button {
        padding: 20/@base 10/@base;
        font-size: 24/@base;
        
      }
      select {
        padding: 0;
        margin-bottom: 0;
        text-align: center;
        padding: 0 50/@base;
        width: unset;
        margin: 0 auto;
        font-size: 30/@base;
      }
    }
    .mui-table-view .mui-media-object {
      line-height: 200/@base;
      max-width: 200/@base;
      height: 200/@base;
    }
    .mui-table-view .mui-media, .mui-table-view .mui-media-body {
      p.productName {
        font-size: 26/@base;
        font-weight: 700;
        line-height: 1.5;
        white-space: initial;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      p.productPrice {
        font-size: 24/@base;
        color: red;
        margin-top: 12/@base;
      }
    }
    p {
      font-size: 20/@base;
    }
    p.productName {
      height: 80/@base;
    }
    p.productSmall {
      position: absolute;
      bottom: 20/@base;
    }
    .mui-table-view-cell>a:not(.mui-btn) {
      white-space: unset;
    }
  }
</style>
